<template>
  <div class="location">
    <div class="city" @click="cityClick()">{{ currentCity.cityName }}</div>
    <div class="position">
      <span>我的位置</span>
      <img src="@/assets/img/home/icon_location.png" alt="" />
    </div>
  </div>
  <!-- 日历相关 -->
  <div class="section" @click="showCalendar = true">
    <div class="checkIn">
      <div class="date">
        <span class="tip">入住</span>
        <span class="time">{{ startTime }}</span>
      </div>
      <div class="duration">共{{ durationTime }}晚</div>
    </div>

    <div class="checkOut">
      <div class="date">
        <span class="tip">离店</span>
        <span class="time">{{ endTime }}</span>
      </div>
    </div>
  </div>
  <div class="calendar">
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      @confirm="onConfirm"
      :round="false"
      color="#ff9854"
      :formatter="formatter"
      :show-confirm="false"
    />
  </div>
</template>

<script setup>
import useCityStore from "@/stores/cityStore";
import { dateFormat, dateDiff } from "@/utils/dataFormat";
import dayjs from "dayjs";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();

const cityClick = () => {
  router.push("/city");
};
const cityStore = useCityStore();
const { currentCity } = storeToRefs(cityStore);

const startTime = ref(dateFormat(dayjs()));
const endTime = ref(dateFormat(dayjs().add(1, "day")));
const showCalendar = ref(false);

const durationTime = ref(dateDiff(dayjs(), dayjs().add(1, "day")));
const formatter = (day) => {
  if (day.type === "start") {
    day.bottomInfo = "入住";
  } else if (day.type === "end") {
    day.bottomInfo = "离店";
  }
  return day;
};
const onConfirm = (date) => {
  startTime.value = dateFormat(date[0]);
  endTime.value = dateFormat(date[1]);
  durationTime.value = dateDiff(date[0], date[1]);
  showCalendar.value = false;
};
</script>

<style lang="less" scoped>
.location {
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  display: flex;
  height: 24px;
  .city {
    flex: 1;
  }

  .position {
    position: relative;
    width: 74px;
    img {
      position: absolute;
      bottom: 2px;
      width: 14px;
      height: 14px;
      margin-left: 3px;
    }
  }
}
.section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 44px;
  padding: 0 20px;
  .checkIn {
    display: flex;
    flex: 1;
    height: 44px;
    align-items: center;
    .duration {
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: #666;
    }
  }
  .date {
    display: flex;
    flex-direction: column;
    .tip {
      font-size: 12px;
      color: #999;
    }
    .time {
      margin-top: 3px;
      color: #333;
      font-size: 15px;
      font-weight: 500;
    }
  }
}
.calendar {
  --van-calendar-popup-height: 100%;
}
</style>
